<template>
  <div class="followup">
    <div class="followup-head">
      <el-button class="btn-1" @click="addFollow" v-jurisdiction="'customer:access:follow:add'">新增随访</el-button>
    </div>
    <div class="followup-content">
      <ztable 
          :tableData='tableData' 
          :strucs='strucs'
          :isshowOperation="true"
          :border="false"
          :height="'100%'"
        >
        <template #default="slotData">
          <el-button @click="handleImplement(slotData.rowData)" 
            type="text" 
            size="small" 
            class="operation" 
            v-jurisdiction="'customer:access:perform'"
            v-if="slotData.rowData.status === '待处理'"
            >执行</el-button>
          <el-button @click="handleEditItem(slotData.rowData)" 
            type="text" 
            size="small" 
            class="operation" 
            >修改</el-button>
          <!-- <el-button @click="handleDelItem(slotData.rowData)" type="text" size="small" class="operation" >删除</el-button>
          <el-button @click="handleLog(slotData.rowData)" type="text" size="small" class="operation" >日志</el-button> -->
        </template>
        </ztable>
    </div>

    <zdrawer size="55%" @handleClose="drawer('新增随访')" title="新建随访" v-model="showDrawer" >
      <template #body>
        <div class="drawer-main">
          <div class="drawer-info">
            <zswitchtabs :personID="id"></zswitchtabs>
          </div>
          <div class="drawer-opration">
            <div class="drawer-switch">
              <div :class="{'active': isActive === 'followUpPlan'}" @click="setActive('followUpPlan')">计划随访</div>
              <div :class="{'active': isActive === 'implement'}" @click="setActive('implement')">已完成随访</div>
            </div>
            <div class="drawer-content">
              <!-- 随访计划 -->
              
                <div class="callapse">
                <div class="show-head" @click="handleShow">
                  <span class="head-ctx">
                      <!-- <component :is="showWidget(item.type)"  v-for="item in firstThreeData" :key="item.name" :struc="item"  /> -->
                      <span class="name">{{info}}</span>
                      <span class="sex">
                        <el-icon v-if="sex === '男'" class="male-color"><male /></el-icon>
                        <el-icon v-if="sex === '女'" class=" female-color"><female /></el-icon>
                      </span>
                      <span>电话 {{mobileNum}}</span>
                  </span>
                  <span class="icon-btn">
                    <el-icon v-if="isShow"><arrow-right /></el-icon>
                    <el-icon v-else><ArrowDown /></el-icon>
                  </span>
                  
                </div>
                <div class="show-content" v-show="!isShow">
                  <!-- 有多条数据展开时 -->
                    
                    <div class="dynamic flexwrap">
                      <component :is="showWidget(item.type)"  v-for="item in registerAdd" :key="item.name" :struc="item"  />
                    </div>
                </div>
                </div>
                <div v-show="isActive === 'followUpPlan'">
                  <div class="plan-content">
                    <div class="one-content">
                      <div class="label">就诊时间</div>
                      <el-date-picker
                                type="datetime"
                                v-model="sickTime"
                                @change="handleChangeDate($event)"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                >
                      </el-date-picker>
                    </div>
                    <div class="one-content">
                      <div class="label">创建人</div>
                      <el-select v-model="createUserId"   filterable placeholder="请选择">
                        <el-option
                          v-for="item in createUserOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="one-content">
                      <div class="label">随访模板</div>
                      <el-select v-model="modelId"   filterable clearable placeholder="请选择">
                        <el-option
                          v-for="item in modelOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="one-content">
                      <div class="label">	创建方式</div>
                      <el-select v-model="createType"   filterable placeholder="请选择">
                        <el-option
                          v-for="item in createTypeOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="one-content">
                      <div class="label">	创建时间方式</div>
                      <el-select v-model="createTimeType"   filterable placeholder="请选择">
                        <el-option
                          v-for="item in createTimeTypeOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                  </div>

                  <div class="plan" v-for="(item, index) in plan" :key="index">
                      <header class="plan-head">
                        <div class="head-left">
                          <span>计划{{index + 1}}</span>
                          <span>{{item.planTime}}</span>
                        </div>
                        <div class="head-right">
                          <span @click="delPlan(index)">删除计划</span>
                        </div>
                      </header>
                      <div class="plan-content">
                        <div class="one-content">
                          <div class="label">计划时间</div>
                              <el-date-picker
                                style="width: 30px"
                                :clearable="false"
                                type="date"
                                @change="handleChangeDate($event, index)"
                                >
                            </el-date-picker>
                            <el-input v-model="item.timeNumber" style="width: 50px" @input="handleSetPlanTime($event, index)"  />
                            <div class="type-btns">
                              <div v-for="(time) in TimeType" :key="time.id"
                                :class="{'active': item.timeType === time.name}" 
                                @click="setDateType(time.id, index)"
                              >{{time.name}}</div>
                            </div>
                          <span>后</span>
                        
                        </div>


                        
                        <div class="one-content">
                          <div class="label">随访医生</div>

                          <el-select 
                            v-model="item.doctorType" 
                            class="w-180" 
                            filterable  
                            placeholder="请选择"
                            @change="setDoctotID(item.doctorType, index)"
                            >
                            <el-option
                              v-for="item in doctorTypeOptions"
                              :key="item.typeValue"
                              :label="item.showValue"
                              :value="item.typeValue">
                            </el-option>
                          </el-select>
                          <template v-if="item.doctorType === '其他医生'">
                            <el-select v-model="item.doctorId" class="w-180" 
                              filterable
                              remote
                              :remote-method="remoteMethod"
                              placeholder="请选择">
                              <el-option
                                v-for="item in doctorOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </template>
                        </div>

                        <div class="one-content">
                          <div class="label">随访项目</div>
                          <el-select v-model="item.accessItem" clearable filterable  class="w-180"  placeholder="请选择">
                            <el-option
                              v-for="item in optionOrderDetails"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </div>

                        <div class="one-content">
                          <div class="label">随访人员</div>
                          <el-select 
                            v-model="item.dealUserType" 
                            class="w-180"  
                            filterable placeholder="请选择"
                            @change="setPersonID(item.dealUserType, index)"
                            >
                            <el-option
                              v-for="item in dealUserTypeOptions"
                              :key="item.typeValue"
                              :label="item.showValue"
                              :value="item.typeValue">
                            </el-option>
                          </el-select>
                          <template v-if="item.dealUserType === '其他人员'">
                            <el-select v-model="item.dealUserId" class="w-180"  filterable placeholder="请选择">
                              <el-option
                                v-for="item in dealUserOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </template>
                        </div>

                        <div class="one-content" >
                          <div class="label">随访内容</div>
                          <div>
                            <el-select
                              v-model="item.planContentType"
                              @change="handleSelectChange($event, index)" 
                              placeholder="请选择"
                              filterable
                              >
                              <el-option
                                v-for="item in optionList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                            </el-select>
                            <el-input
                              type="textarea"
                              :rows="2"
                              class="content-input"
                              placeholder="请输入内容"
                              v-model="item.planContent">
                            </el-input>
                          </div>
                          
                        </div>
                        <!-- <div class="one-content" style="width: 90%">
                          <div class="label">备注</div>
                          <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="item.remark">
                          </el-input>
                        </div> -->


                      </div>
                    </div>
                  <div class="btns">
                    <el-button class="btn-9"  @click="addPlan">新增计划</el-button>
                  </div>
              </div>
              <!-- 执行 -->
              <div v-show="isActive === 'implement'">
                <div class="direct-implement">
                  <div class="flex-wrap">
                    <div class="leftToRight-layout">
                        <div class="label">
                          <span>随访医生</span>
                        </div>
                        <div class="operations">
                          <el-select  class="w-180" v-model="doctorId" 
                            filterable  
                            remote
                            :remote-method="remoteMethod"
                            placeholder="请选择">
                            <el-option
                              v-for="item in doctorOptions"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访人员</span>
                      </div>
                      <div class="operations">
                        <el-select  class="w-180" v-model="dealUserId" filterable  placeholder="请选择">
                          <el-option
                            v-for="item in dealUserOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访时间</span>
                      </div>
                      <div class="operations">
                        <el-date-picker
                          type="date"
                          v-model="planTime"
                          @change="handleChangeDate"
                          >
                        </el-date-picker>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>联系方式</span>
                      </div>
                      <div class="operations">
                        <el-select  class="w-180" v-model="contactType" filterable  placeholder="请选择">
                          <el-option
                            v-for="item in contactOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访内容</span>
                      </div>
                      <div class="operations">
                        <div>
                          <el-select
                            v-model="planContentType"
                            @change="handleSelectChange($event, 99)" 
                            placeholder="请选择"
                            filterable
                            >
                            <el-option
                              v-for="item in optionList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                          <el-input
                              type="textarea"
                              :rows="4"
                              placeholder="请输入内容"
                              v-model="planContent"
                              >
                            </el-input>
                          </div>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访结果</span>
                      </div>
                      <div class="operations">
                        <div>
                          <el-select
                            v-model="backContentType"
                            @change="handleResultChange($event)" 
                            placeholder="请选择"
                            filterable
                            >
                            <el-option
                              v-for="item in optionResultList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                          <el-input
                            type="textarea"
                            :rows="4"
                            v-model="backContent"
                            placeholder="随访结果"
                            >
                          </el-input>
                        </div>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访项目</span>
                      </div>
                      <div class="operations">
                        <el-select v-model="orderDetailId" clearable filterable  class="w-180"  placeholder="请选择">
                            <el-option
                              v-for="item in optionOrderDetails"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                      </div>
                    </div>
                    <div class="leftToRight-layout" style="width: 100%;">
                      <div class="label">
                        <span>备注</span>
                      </div>
                      <div class="operations">
                        <el-input
                            type="textarea"
                            v-model="remark"
                            :rows="6"
                            >
                          </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </template>
      <template #footer>
        <el-button class="btn-2" @click="drawer('新增随访')">取消</el-button>
        <el-button class="btn-1" @click="save('新增随访')" v-if="isActive === 'followUpPlan'">保存</el-button>
        <el-button class="btn-1" @click="save('已完成随访')" v-if="isActive === 'implement'">确定</el-button>
      </template>
    </zdrawer>

    <!-- 修改随访 -->
    <zdrawer size="55%" @handleClose="drawer('修改随访')" :title="eidtTitle" v-model="editShowDrawer" >
      <template #body>
        <div class="drawer-main">
          <div class="drawer-info">
            <zswitchtabs :personID="id"></zswitchtabs>
          </div>
          <div class="drawer-opration">
            <div class="drawer-content">
              <!-- 随访计划 -->
              
                <div class="callapse">
                <div class="show-head" @click="handleShow">
                  <span class="head-ctx">
                      <!-- <component :is="showWidget(item.type)"  v-for="item in firstThreeData" :key="item.name" :struc="item"  /> -->
                      <span class="name">{{info}}</span>
                      <span class="sex">
                        <el-icon v-if="sex === '男'" class="male-color"><male /></el-icon>
                        <el-icon v-if="sex === '女'" class=" female-color"><female /></el-icon>
                      </span>
                  </span>
                  <span class="icon-btn">
                    <el-icon v-if="isShow"><arrow-right /></el-icon>
                    <el-icon v-else><ArrowDown /></el-icon>
                  </span>
                  
                </div>
                <div class="show-content" v-show="!isShow">
                  <!-- 有多条数据展开时 -->
                    
                    <div class="dynamic flexwrap">
                      <component :is="showWidget(item.type)"  v-for="item in registerAdd" :key="item.name" :struc="item"  />
                    </div>
                </div>
                </div>
              <!-- 执行 -->
                <div class="direct-implement">
                  <div class="flex-wrap">
                    <div class="leftToRight-layout">
                        <div class="label">
                          <span>随访医生</span>
                        </div>
                        <div class="operations">
                          <el-select  class="w-180" v-model="doctorId" 
                            filterable 
                            remote
                            :remote-method="remoteMethod"
                            placeholder="请选择">
                            <el-option
                              v-for="item in doctorOptions"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访人员</span>
                      </div>
                      <div class="operations">
                        <el-select  class="w-180" v-model="dealUserId" filterable  placeholder="请选择">
                          <el-option
                            v-for="item in dealUserOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>

                    <div class="leftToRight-layout" v-show='eidtTitle === "修改随访(待计划)"'>
                      <div class="label">
                        <span>咨询师</span>
                      </div>
                      <div class="operations">
                        <el-select v-model="consultantId" class="w-180" filterable  placeholder="请选择">
                            <el-option
                              v-for="item in optionsSecondaryUser"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>{{eidtTitle === '修改随访(已完成)' ? '随访时间':'计划时间'}}</span>
                      </div>
                      <div class="operations">
                        <el-date-picker
                          type="date"
                          v-model="planTime"
                          @change="handleChangeDate"
                          >
                        </el-date-picker>
                      </div>
                    </div>
                    <div class="leftToRight-layout" v-show="eidtTitle === '修改随访(已完成)'">
                      <div class="label">
                        <span>联系方式</span>
                      </div>
                      <div class="operations">
                        <el-select  class="w-180" v-model="contactType" filterable  placeholder="请选择">
                          <el-option
                            v-for="item in contactOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访内容</span>
                      </div>
                      <div class="operations">
                        <div>
                          <el-select
                              v-model="planContentType"
                              @change="handleSelectChange($event, 99)" 
                              placeholder="请选择"
                              filterable
                              >
                              <el-option
                                v-for="item in optionList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          <el-input
                              type="textarea"
                              :rows="4"
                              placeholder="请输入内容"
                              v-model="planContent"
                              >
                            </el-input>
                          </div>
                      </div>
                    </div>
                    <div class="leftToRight-layout" v-show="eidtTitle === '修改随访(已完成)'">
                      <div class="label">
                        <span>随访结果</span>
                      </div>
                      <div class="operations">
                        <div>
                          <el-select
                            v-model="backContentType"
                            @change="handleResultChange($event)" 
                            placeholder="请选择"
                            filterable
                            >
                            <el-option
                              v-for="item in optionResultList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                              
                              >
                            </el-option>
                          </el-select>
                          <el-input
                            type="textarea"
                            :rows="4"
                            v-model="backContent"
                            placeholder="随访结果"
                            >
                          </el-input>
                        </div>
                        
                      </div>
                    </div>
                    <div class="leftToRight-layout" style="width: 100%;">
                      <div class="label">
                        <span>备注</span>
                      </div>
                      <div class="operations">
                        <el-input
                            type="textarea"
                            v-model="remark"
                            :rows="6"
                            >
                          </el-input>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button class="btn-2" @click="drawer(eidtTitle)">取消</el-button>
        <el-button class="btn-1" @click="save(eidtTitle)">保存</el-button>
      </template>
    </zdrawer>

    <zdrawer size="55%" @handleClose="drawer('执行随访')" title="执行随访" v-model="showPerformDrawer" >
      <template #body>
        <div class="drawer-main">
          <div class="drawer-info">
            <zswitchtabs :personID="id"></zswitchtabs>
          </div>
          <div class="drawer-opration">
            <div class="drawer-content">
              <!-- 随访计划 -->
                <div class="callapse">
                <div class="show-head" @click="handleShow">
                  <span class="head-ctx">
                      <!-- <component :is="showWidget(item.type)"  v-for="item in firstThreeData" :key="item.name" :struc="item"  /> -->
                      <span class="name">{{info}}</span>
                      <span class="sex">
                        <el-icon v-if="sex === '男'" class="male-color"><male /></el-icon>
                        <el-icon v-if="sex === '女'" class=" female-color"><female /></el-icon>
                      </span>
                  </span>
                  <span class="icon-btn">
                    <el-icon v-if="isShow"><arrow-right /></el-icon>
                    <el-icon v-else><ArrowDown /></el-icon>
                  </span>
                  
                </div>
                <div class="show-content" v-show="!isShow">
                  <!-- 有多条数据展开时 -->
                    
                    <div class="dynamic flexwrap">
                      <component :is="showWidget(item.type)"  v-for="item in registerAdd" :key="item.name" :struc="item"  />
                    </div>
                </div>
                </div>
              <!-- 执行 -->
                <div class="direct-implement">
                  <div class="flex-wrap">
                    <div class="leftToRight-layout">
                        <div class="label">
                          <span>创建人</span>
                        </div>
                        <div class="operations">
                          <span>{{createUserName || '暂无'}}</span>
                        </div>
                    </div>
                    <div class="leftToRight-layout">
                        <div class="label">
                          <span>创建时间</span>
                        </div>
                        <div class="operations">
                          <span>{{createTime || '暂无'}}</span>
                        </div>
                    </div>
                    <div class="leftToRight-layout">
                        <div class="label">
                          <span>随访医生</span>
                        </div>
                        <div class="operations">
                          <span>{{doctorName || '暂无'}}</span>
                          <!-- <el-select  class="w-180" v-model="doctorId"  placeholder="请选择">
                            <el-option
                              v-for="item in doctorOptions"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select> -->
                        </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访人员</span>
                      </div>
                      <div class="operations">
                        <span>{{dealUserName || '暂无'}}</span>
                        <!-- <el-select  class="w-180" v-model="dealUserId"  placeholder="请选择">
                          <el-option
                            v-for="item in dealUserOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select> -->
                      </div>
                    </div>

                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>咨询师</span>
                      </div>
                      <div class="operations">
                        <span>{{consultantName || '暂无'}}</span>
                        <!-- <el-select v-model="consultantId" class="w-180"  placeholder="请选择">
                            <el-option
                              v-for="item in optionsSecondaryUser"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select> -->
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>联系方式</span>
                      </div>
                      <div class="operations">
                        <el-select  class="w-180" v-model="contactType" filterable  placeholder="请选择">
                          <el-option
                            v-for="item in contactOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>{{'计划时间'}}</span>
                      </div>
                      <div class="operations">
                        {{planTime}}
                        <!-- <el-date-picker
                          type="date"
                          v-model="planTime"
                          @change="handleChangeDate"
                          >
                        </el-date-picker> -->
                      </div>
                    </div>
                    <div class="leftToRight-layout">
                      <div class="label">
                        <span>随访内容</span>
                      </div>
                      <div class="operations">
                        <span>{{planContent || '暂无'}}</span>
                        <!-- <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                            v-model="planContent"
                            >
                          </el-input> -->
                      </div>
                    </div>
                    <div class="leftToRight-layout" >
                      <div class="label">
                        <span>随访结果</span>
                      </div>
                      <div class="operations">
                        <div>
                          <el-select
                              v-model="backContentType"
                              @change="handleResultChange($event)" 
                              placeholder="请选择"
                              filterable
                              >
                              <el-option
                                v-for="item in optionResultList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                          </el-select>
                          <el-input
                              type="textarea"
                              :rows="4"
                              v-model="backContent"
                              placeholder="随访结果"
                              >
                            </el-input>
                          </div>
                      </div>
                    </div>
                    <div class="leftToRight-layout" style="width: 100%;">
                      <div class="label">
                        <span>备注</span>
                      </div>
                      <div class="operations">
                        <el-input
                            type="textarea"
                            v-model="remark"
                            :rows="6"
                            >
                          </el-input>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <!-- <el-button class="btn-1" @click="revisit">再回访</el-button>
        <el-button class="btn-1" @click="cancelReturnVisit">取消本次回访</el-button> -->
        <el-button class="btn-2" @click="drawer('执行随访')">取消</el-button>
        <el-button class="btn-1" @click="save('执行随访')">保存</el-button>
      </template>
    </zdrawer>

    <!-- 执行 -->
    <zdialog title="执行随访" @handleClose="closeDialog" v-model="followDialogVisible" :btnData="followDialogBtnData">
      <template #body>
        <div class="flex-wrap">
          <component :is="showWidget(item.type)" v-for="item in followAddData" :key="item.name" :struc="item" :passWidth="50"  />
        </div>
      </template>
    </zdialog>
  </div>
</template>

<script lang="ts">
import { ArrowDown, ArrowRight, Male, Female } from '@element-plus/icons-vue'
import { defineComponent, reactive, ref, toRefs, onUnmounted, watch, onMounted, nextTick } from '@vue/runtime-core';
import ztable from "../../../components/Table/index.vue"
import zdrawer from "../../../components/drawer/drawer.vue"
import zdialog from '@components/dialog/dialog.vue'
import zswitchtabs from '../../../components/switchTabs/switchTabs.vue'

import useShowWidget from "../../../components/widget/usechoose";
import useRequet, { RespData } from "../../../hook/network"
import useConfgin from '../../../hook/getconfig'
import useDataCheck, { DataStruc } from "./../../../hook/datastruc";
import { 
  getAllUser, 
  getConsultant, 
  getAccessLogContactType, 
  getAccessFollowContent, 
  getAccessFollowItem, 
  getAccessFollowBackContent
  } from "./../../../usefn/getDoctor"

  import { getDoctorListAllAPi } from './../../../api/common'
  import { 
    getCustomerOnGoingServiceItemListApi, 
    getAccessModelAndDetailAPi, getCreateTypeAPI, 
    getCreateTimeTypeAPI,
    getTimeTypeAPI,
    getAccessModelAndDetailSelectAPi,
    getAccessDoctorSelectAPi,
    getDealUserSelectAPi,
    createAccessPlanAPi
    } from './../../../api/follow'
  import { getUserListsAPi } from './../../../api/common'
// 类型
import {Option} from "../../../types"
import { getNowDate, getNowDates, setDate } from '../../../utils/nowDate'
import { setDataSource } from '../../../utils/setData'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router';
// import { nextTick } from 'process';
// 随访
const configID = 540
const ID = 523
type Plan = {
  customerId: string | number,
  planTime: string,
  planContent: string,
  planContentType: string
  dealUserId: number | string,
  doctorId: number | string,
  consultantId: number | string,
  remark: string,
  orderDetailId: number | string,
}
export default defineComponent({
  name: 'FollowUp',
  props: {
      name: {
        type: String
      }
  },
  components: {
    ztable,
    zdrawer,
    zdialog,
    zswitchtabs,

    ArrowDown, ArrowRight, Male, Female
  },
  setup(props) {
    const route = useRoute()
    let id: any = route.params.id
    watch(() => route.params.id, (newId, prevId) => {
      id = newId
      
      if(newId) {
        getPersonInfo()
        getList()
      }
    })
    const request = useRequet({ path: "" });
    const showWidget = useShowWidget;
    const list  = reactive({
      // 数据
      tableData: [],
      // 结构
      strucs: <any>[],
      showDrawer: false,
      editShowDrawer: false,
      eidtTitle: '修改随访(已完成)',

      sourceDoctorAll: [] as Option[],
      doctorOptions:[] as Option[],

      optionsSecondaryUser: [] as Option[],
      dealUserOptions: [] as Option[],
      projectList: [] as Option[],
      showPerformDrawer: false,
      isActive: 'followUpPlan',
      contactOptions: [] as Option[],
      optionList: <Option[]>[],
      optionOrderDetails: <Option[]>[],
      optionResultList: <Option[]>[],
      
      TimeType: [] as Option[],
      createUserOptions: [] as Option[],
      modelOptions: [] as any[],
      createTypeOptions: [] as Option[],
      createTimeTypeOptions: [] as Option[],
      sourceData: [] as any[],
      doctorTypeOptions: [] as any[],
      dealUserTypeOptions: [] as any[]
    })

    const datas = reactive({
      sickTime: getNowDate(),
      createUserId: null,
      modelId: null,
      createType: '',
      createTimeType: '',
    })


    // 侦听模板变化
    watch(() => datas.modelId, (newV)=>{
      console.log(newV)

        let result:any = list.modelOptions.filter(i => i.id === newV)
        // datas.createType = result.createType
        // datas.createTimeType = result.createTimeType

        if(result.length) {
          planList.plan = []
          result[0].details.forEach((i:any, index:number) => {
            console.log(i)
            planList.plan.push({
              planTime: getNowDates(),
              timeNumber: i.timeNumber || 0,
              timeType: i.timeType || '天',
              accessItem: Number(i.accessItem) as any || null,
              planContentType: i.planContentType || '',
              planContent: i.planContent || '',
              doctorType: i.doctorType || '就诊医生',
              doctorId: i.doctorId || '',
              dealUserType: i.dealUserType || '其他人员',
              dealUserId: i.dealUserId || ''
            })

            setDoctotID(i.doctorType, index)
            setPersonID(i.dealUserType, index)
            planList.plan[index].planTime = setDate(planList.plan[index].timeNumber, planList.plan[index].timeType)
          })
        }
        
      
    })

  

    onMounted(() => {
      
      getPersonInfo()
      getList()
      getAccessDoctorSelect(id)
    })

    const getUserLists = async() => {
      let res: any = await getUserListsAPi({})
      list.createUserOptions = res.data

      let person:any = window.localStorage.getItem('person')
      let info = JSON.parse(person)
      list.createUserOptions.push({
        id: info.id,
        name: info.name
      })
      datas.createUserId = info.id
    }

    const getAccessModelAndDetailSelect = async() => {
      let res:any = await getAccessModelAndDetailSelectAPi({})
      list.sourceData = res.data
      list.modelOptions = res.data
      console.log('getAccessModelAndDetail', res)
    }

    // 随访创建类型
    const getCreateType = async() => {
      let res:any = await getCreateTypeAPI({})
      console.log(res)
      list.createTypeOptions = res.data
      datas.createType = res.data && res.data[0].id
    }

    // 随访创建时间类型
    const getCreateTimeType = async() => {
      let res:any = await getCreateTimeTypeAPI({})
      console.log(res)
      list.createTimeTypeOptions = res.data
      datas.createTimeType = res.data && res.data[0].id
    }

     // 随访时间类型
    const getTimeType = async() => {
      let res: any = await getTimeTypeAPI({})
      list.TimeType = res.data
    }

     // 随访医生类型
    const getAccessDoctorSelect = async(id:number) => {
      let res: any = await getAccessDoctorSelectAPi({}, id)
      list.doctorTypeOptions = res.data

      let result:any = list.doctorTypeOptions.filter((item) => item.typeValue === '就诊医生')
      planList.plan[0].doctorId = result.length && result[0].userId
    }

     // 随访人员类型
    const getDealUserSelect = async(id:number) => {
      let res: any = await getDealUserSelectAPi({}, id)
      list.dealUserTypeOptions = res.data
    }

    const setDateType = (type: any, index: number) => {
      console.log(type, index, '设置')
      planList.plan[index].timeType = type
      planList.plan[index].planTime = setDate(planList.plan[index].timeNumber, planList.plan[index].timeType)
    }

    const setDoctotID = (type: string, index:number) => {
      if(type === '其他医生') return
      let result:any = list.doctorTypeOptions.filter((item) => item.typeValue === type)
      planList.plan[index].doctorId = result && result[0].userId
    }

    const setPersonID = (type: string, index:number) => {
      if(type === '其他人员') return
      let result:any = list.dealUserTypeOptions.filter((item) => item.typeValue === type)
      planList.plan[index].dealUserId = result && result[0].userId
    }
    


    const setActive = (val: string) => {
      list.isActive = val
    }

    const rowsList = useConfgin(configID)
    list.strucs = rowsList.groupDataList.value;
    console.log('随访', rowsList, list.strucs)

    // 执行
    const handleImplement = (rowData: any) => {
      let { id } = rowData
      followId.value = rowData.id
      getPersonInfo()
      eidtEchoData(id)
      list.showPerformDrawer = true
    }
    // 修改(完成、待计划)
    const handleEditItem = (rowData: any) => {
      let { id } = rowData
      followId.value = id
      getPersonInfo()
      eidtEchoData(id)
      getDoctorAndNurse()
      console.log(rowData.status)
      if(rowData.status === '待处理') {
        list.eidtTitle = '修改随访(待计划)'
      }
      if(rowData.status === '完成') {
        list.eidtTitle = '修改随访(已完成)'
      }
      list.editShowDrawer = true
    }

    // 删除
    const handleDelItem = (rowData: any) => {

    }

    // 日志
    const handleLog = (rowData: any) => {

    }

    // 修改随访回显数据
    const eidtEchoData = (id: number) => {
      request.sendRequest({
        address: `sick/accessLog/getAccessLogById/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          console.log('修改', resp.data)
          let data = resp.data
          planList.doctorId = data.doctorId
          planList.dealUserId = data.dealUserId
          planList.consultantId = data.consultantId
          planList.planTime = data.planTime
          planList.planContent = data.planContent
          planList.remark = data.remark
          planList.contactType = data.contactType
          planList.backContent = data.backContent

          planList.createUserName = data.createUserName
          planList.createTime = data.createTime
          planList.doctorName = data.doctorName
          planList.dealUserName = data.dealUserName
          planList.consultantName = data.consultantName

          let res = list.optionsSecondaryUser.filter(i => i.id === data.dealUserId)
          console.log(res)
          if(res.length === 0) {
            list.optionsSecondaryUser.push({
              id: data.dealUserId,
              name: data.consultantName
            })
          }
          
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      }) 
    }

    // let personName = props.name
    const isShow = ref(false)
    const sex = ref('')
    const mobileNum = ref('')
    const info = ref(props.name)

    const registerinfo = useConfgin(ID)
    const registerAdd = registerinfo.groupDataAdd

    const handleShow = () => {
      isShow.value = !isShow.value
    }

    // 得到所有用户 / 咨询师 / 联系方式
    const getDealUserOptions = async() => {
      try{
        list.dealUserOptions = await getAllUser()
        let person:any = window.localStorage.getItem('person')
        let info = JSON.parse(person)
        list.dealUserOptions.push({
          id: info.id,
          name: info.name
        })
        list.optionsSecondaryUser = await getConsultant()
        list.contactOptions = await getAccessLogContactType()
        list.optionList = await getAccessFollowContent()
        list.optionOrderDetails = await getAccessFollowItem()
        list.optionResultList = await getAccessFollowBackContent()
      } catch(e) {
        throw e
      }
      
    }
    getDealUserOptions()

    const addFollow = () => {
      list.showDrawer = true
      
      getDoctorAndNurse()
      getPersonInfo()

      
      getDealUserSelect(id)
      getAccessModelAndDetailSelect()
      getCreateType()
      getCreateTimeType()
      getUserLists()
      getTimeType()
    }
    const drawer = (type: string) => {
      ElMessageBox.confirm('此操作将关闭窗口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        list.isActive = 'followUpPlan'
				if(type === '新增随访' || type === '已完成随访') {
          list.showDrawer = false
        }
        if(type === '执行随访') {
          list.showPerformDrawer = false
        }
        list.editShowDrawer = false
			}).catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消',
					});
      })
      
      
    }

    const handleSelectChange = (v: string, index: number) => {
      if(index === 99) {
        planList.planContent = v
      }else {
        planList.plan[index].planContent = v
      }
      
    }

    const handleResultChange = (v: string) => {
      planList.backContent = v
    }

    const handleSetPlanTime = (v:string, i: number) => {
      
      console.log(v, Number(v), i)
      if(isNaN(Number(v))) {
        planList.plan[i].timeNumber = 0
      } else {
        planList.plan[i].timeNumber = Number(v)
        if(Number(v) < 0) {
          planList.plan[i].timeNumber = 0
        } else {
          planList.plan[i].planTime = setDate(planList.plan[i].timeNumber, planList.plan[i].timeType)
        }
      }
    }

    const handleChangeDate = (e: string, index = -1) => {
      console.log(e, index)
      if(index != -1) {
        planList.plan[index].planTime = e

      } else {
        planList.planTime = e

      }
      
      
    }
    const isClick = ref('day')
    const planList = reactive({
      plan:[
        {
          // customerId:'',
          // planTime: getNowDate(),
          // dealUserId: '',
          // doctorId: '',
          // consultantId: '',
          // planContent: '',
          // planContentType: '',
          // orderDetailId: '',
          // remark: '',

          planTime: getNowDates(),
          timeNumber: 0,
          timeType: '天',
          accessItem: null,
          planContentType: '',
          planContent: '',
          doctorType: '就诊医生',
          doctorId: '',
          dealUserType: '其他人员',
          dealUserId: ''
        }
      ] as any[],
      doctorId: null,
      dealUserId: null,
      consultantId: null,
      planTime: getNowDate(),
      planContent: '',
      planContentType: '',
      remark: '',
      contactType: '',
      backContent: '',
      backContentType: '',
      orderDetailId: null,

      // 执行随访展示
      createUserName: '',
      createTime: '',
      doctorName: '',
      dealUserName: '',
      consultantName: ''
    })
    
    const getList = () => {
      request.sendRequest({
        address: 'sick/accessLog/getLogList',
        params: {
          customerId: Number(id)
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          console.log(resp.data)
          list.tableData = resp.data
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "POST",
      }) 
    }

    const getPersonInfo = () => {
      request.sendRequest({
        address: `customer/info/getCustomerInfo/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          let list = resp.data
          sex.value = list.gender
          info.value = list.name
          mobileNum.value = list.mobileNum
          registerAdd.value.forEach(item => {
            item.value = list[item.name]
          })
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      })
    }
    
    
    // 随访 新增计划
    const addPlan = () => {
      planList.plan.push({
        // customerId: '',
        // planTime: '',
        // dealUserId: '',
        // doctorId: '',
        // consultantId: '',
        // planContent: '',
        // planContentType: '',
        // orderDetailId: '',
        // remark: '',

        planTime: getNowDates(),
        timeNumber: 0,
        timeType: '天',
        accessItem: null,
        planContentType: '',
        planContent: '',
        doctorType: '就诊医生',
        doctorId: '',
        dealUserType: '其他人员',
        dealUserId: ''
      })
    }
    const delPlan = (index: number) => {
      planList.plan.splice(index, 1)
    }

    // 获取分院全部医生
    const getDoctorAndNurse = async() => {
      let res:any = await getDoctorListAllAPi({})
      if(res.code !== 0) return ElMessage.error(res.msg || '获取信息失败')
      list.sourceDoctorAll = res.data;

      let arrList = setDataSource(list.sourceDoctorAll, 10, [])
      console.log(arrList)
      list.doctorOptions = arrList

      // 获取项目下拉
      let res1:any = await getCustomerOnGoingServiceItemListApi({}, id)
      list.projectList = res1.data || []
    }

     // 过滤函数
    const remoteMethod = (query: string) => {
      console.log(query)
      
      let res = list.sourceDoctorAll.filter(i => i.name.includes(query))
      if(res.length) {
        list.doctorOptions = res
      } else {
        let arrList = setDataSource(list.sourceDoctorAll, 10, [])
        list.doctorOptions = arrList
      }
      
    }

    // 重置计划
    const resetPlan = () => {
      planList.plan = [
        {
          // customerId:'',
          // planTime: '',
          // dealUserId: '',
          // doctorId: '',
          // consultantId: '',
          // planContent: '',
          // planContentType: '',
          // orderDetailId: '',
          // remark: ''

          planTime: getNowDates(),
          timeNumber: 0,
          timeType: '天',
          accessItem: null,
          planContentType: '',
          planContent: '',
          doctorType: '就诊医生',
          doctorId: '',
          dealUserType: '其他人员',
          dealUserId: ''
        }
      ]
      planList.doctorId = null,
      planList.dealUserId = null,
      planList.consultantId = null,
      planList.planTime = '',
      planList.planContent = '',
      planList.planContentType = '',
      planList.remark = '',
      planList.contactType = '',
      planList.backContent = '',
      planList.backContentType = '',
      planList.orderDetailId = null,

      // 执行随访展示
      planList.createUserName = '',
      planList.createTime = '',
      planList.doctorName = '',
      planList.dealUserName = '',
      planList.consultantName = ''
    }

    //  删除随访
    const deleteFollow = (id: number) => {

    }

    const save = async(type: string) => {
      if(type === '新增随访') {
        let params = {
          customerId: Number(id),
          sickTime: datas.sickTime,
          createUserId: datas.createUserId,
          modelId: datas.modelId,
          createType: datas.createType,
          createTimeType: datas.createTimeType,
          details: planList.plan
        }
        console.log(params)
        let res:any = await createAccessPlanAPi(params)
        if(res.code === 0) {
          ElMessage.success('添加成功')
            resetPlan()
            getList()
            list.showDrawer = false
        } else {
          ElMessage.error(res.msg)
        }

      }

      if(type === '已完成随访') {

        if(!planList.doctorId) {
          ElMessage.warning('请选择医生')
          return
        }
        if(!planList.dealUserId) {
          ElMessage.warning('请选择随访人员')
          return
        }
        if(!planList.planTime) {
          ElMessage.warning('请选择随访时间')
          return
        }
        if(!planList.planContent) {
          ElMessage.warning('请输入内容')
          return
        }
        if(!planList.backContent) {
          ElMessage.warning('请输入结果')
          return
        }
        request.sendRequest({
          address: 'sick/accessLog/addCompleteFollowAccessLog',
          params: {
            customerId: Number(id),
            doctorId: planList.doctorId,
            dealUserId: planList.dealUserId,
            planTime: planList.planTime,
            planContent: planList.planContent,
            remark: planList.remark,
            contactType: planList.contactType,
            backContent: planList.backContent
          },
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
            console.log(resp.data)
            ElMessage.success('随访成功')
            resetPlan()
            getList()
            list.showDrawer = false
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)
            
          },
          method: "POST",
        })
      }

      if(type === '执行随访') {

        handleFollow()
      }

      console.log(type)
      if(type === '修改随访(已完成)') {
        
        eidtOver()
      }

      if(type === '修改随访(待计划)') {
        eidtHandle()
      }


      
    }

    // 修改随访(已完成) 
    const eidtOver = () => {
      request.sendRequest({
          address: 'sick/accessLog/updateCompleteFollowAccessLog',
          params: {
            id: followId.value,
            doctorId: planList.doctorId,
            dealUserId: planList.dealUserId,
            planTime: planList.planTime,
            planContent: planList.planContent,
            remark: planList.remark,
            contactType: planList.contactType,
            backContent: planList.backContent
          },
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
            console.log(resp.data)
            ElMessage.success('修改随访成功')
            resetPlan()
            getList()
            list.editShowDrawer = false
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)
            
          },
          method: "POST",
        })
    }

    // 修改随访(待处理) 未完成
    const eidtHandle = () => {
      request.sendRequest({
          address: 'sick/accessLog/updateCompleteFollowAccessPlan',
          params: {
            id: followId.value,
            doctorId: planList.doctorId,
            dealUserId: planList.dealUserId,
            consultantId: planList.consultantId,
            planTime: planList.planTime,
            planContent: planList.planContent,
            remark: planList.remark,
          },
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
            console.log(resp.data)
            ElMessage.success('修改随访成功')
            resetPlan()
            getList()
            list.editShowDrawer = false
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)
            
          },
          method: "POST",
        })
    }
    
    
    // 执行随访
    const handleFollow = () => {
      request.sendRequest({
        address: 'sick/accessLog/completeAccessLog',
        params: {
          id: followId.value,
          backContent: planList.backContent,
          remark: planList.remark,
          contactType: planList.contactType,
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('执行随访' + resp.msg)
          ElMessage.success('执行随访成功')
          list.showPerformDrawer = false
          resetPlan()
          getList()
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('执行随访' + resp.msg)
        },
        method: "POST",
      })
    }
    // 再回访
    const revisit = () => {

    }
    // 取消本次回访
    const cancelReturnVisit = () => {

    }

    // 执行
    const followAddData = ref([
      {
           id: 529,
            name: "backContent",
            viewName: "内容",
            type: 102,
            groupId: 501,
            dataSource: "",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 1,
            errorHit: "请输入内容",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: 1,
            idName: null
        },
        {
           id: 529,
            name: "remark",
            viewName: "备注",
            type: 102,
            groupId: 501,
            dataSource: "",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 0,
            errorHit: "",
            value: "",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: 1,
            idName: null
        },
    ])
    const dataCheck = useDataCheck();
    const followId = ref('')
    const followDialogVisible = ref(false)
    const followDialogBtnData = [
      {
				name: '关闭',
				func: (data:object) => {
					console.debug('关闭',JSON.parse(JSON.stringify(data)))
          closeDialog()
          // ElMessage('功能还在完善,敬请期待......');
			  }
      },
      {
				name: '保存',
				func: (data:object) => {
					console.debug('保存',JSON.parse(JSON.stringify(data)))
          let params = {} as any 
          if(!dataCheck.checkAll()) {
              return false
          }
          followAddData.value.forEach(item => {
              params[item.name] = item.value
            })
            params.id = followId.value

            
			  }
      },
    ]
    const closeDialog = () => {
      followDialogVisible.value = false
    }

    onUnmounted(() => {
			dataCheck.clearDataCheck();
		});


    // const getDay = (data: string) => {
    //   isClick.value = data
    // }
    // const getWeek = (data: string) => {
    //   isClick.value = data
    // }
    // const getMonth = (data: string) => {
    //   isClick.value = data
    // }
    return {
      id,
      ...toRefs(list),
      ...toRefs(datas),
      handleImplement,
      handleEditItem,
      handleDelItem,
      handleLog,
      addFollow,
      drawer,
      setActive,
      handleChangeDate,
      handleSelectChange,
      handleResultChange,
      handleSetPlanTime,
      setDoctotID,
      setPersonID,

      ...toRefs(planList),
      isClick,
      addPlan,
      delPlan,
      setDateType,

      save,
      isShow,
      sex,
      mobileNum,
      info,
      handleShow,
      registerAdd,
      showWidget,
      revisit,
      cancelReturnVisit,
      close,

      getList,

      remoteMethod,

      followAddData,
      followId,
      followDialogVisible,
      followDialogBtnData,
      closeDialog,
      dataCheck,
      // getDay,
      // getWeek,
      // getMonth
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../../../style/followrtyle.scss';
.followup {
  height: calc(100% - 40px);
  .followup-head {
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 15px;
    border-bottom: 2px solid $mainColor;
    box-sizing: border-box;
  }
  .followup-content {
    height: calc(100% - 40px);
  }
}

// 随访
.plan {
  // height: 160px;
  border: 1px solid $mainColor;
  border-radius: $radius-1;
  margin-bottom: 10px;
  box-sizing: border-box;
  .plan-head {
    padding: 0 10px 0 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid $mainColor;
    display: flex;
    font-size: $fontSize;
    background: $a2-Color;
    .head-left {
      & > span:first-child {
        padding-right: 10px;
        position: relative;
      }
      & > span:first-child::before {
        content: '';
        display: block;
        width: 1px;
        height: 18px;
        background: $mainColor;
        position: absolute;
        top: 0px;
        left: 35px;
      }
      & > span:last-child {
        color: $mainColor;
      }
    }
    .head-right {
      flex: 1;
      text-align: right;
      color: #3d3c3c;
      & > span {
        cursor: pointer;
      }
    }
  }

}

.plan-content {
  font-size: $fontSize-1;
  display: flex;
  flex-wrap: wrap;
  .one-content {
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    width: 50%;
    
    .label {
      padding-right: 10px;
      min-width: 80px;
    }

    .w-180 {
      width: 180px;
    }

    .content-input {
      // width: ;

    }
  }
}
.btns {
  width: 100%;
  .btn-9 {
    width: 100%;
  }
}

.type-btns {
  display: flex;
  align-items: center;
  & > div {
    padding: 6px 10px;
    border: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
    
  }
}



.flexwrap {
  display: flex;
  flex-wrap: wrap;
}
</style>